// reset 样式
* {
    box-sizing: border-box;
    outline: none;
    margin: 0;
}

html {
    font-size: 13px;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2em;
    background: #f1f1f1;
    -webkit-font-smoothing: antialiased;
}

a {
    // color: #999;
    text-decoration: none;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
}

p {
    line-height: 1.5rem;
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 设置不同的字体
$base-font-size: 1rem;
$font-sizes: (xm: 0.7692, //10px
sm: 0.9231, //12px
md: 1, //13px
lg: 1.0769, //14px
xl: 1.2308, //16px,
xxl:1.3846, //18px,
);
@each $fontKey,
$fontVal in $font-sizes {
    .fs-#{$fontKey} {
        font-size: $fontVal * $base-font-size;
    }
}

// 设计颜色工具类
$colors: ("primary": #db9e3f, "blue":#4394e4, "white": #fff, "light": #f9f9f9, "grey": #999, "dark-1": #343440, "dark": #222, "block": #000, );
$borderColor:#d4d9de;
@each $colorKey,
$colorVal in $colors {
    // 文字color
    .text-#{$colorKey} {
        color: $colorVal;
    }
    //背景color
    .bg-#{$colorKey} {
        background-color: $colorVal;
    }
}

// 居中类
@each $var in (left, center, right) {
    .text-#{$var} {
        text-align: $var !important;
    }
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

// flex 布局类
.d-flex {
    display: flex;
}

.flex-warp {
    flex-wrap: wrap;
}

// 设置主轴方向 为竖向   因为默认方向为横向 因此不需要设置
.flex-column {
    flex-direction: column;
}

// 设置拉伸 默认全部填满剩余部分
.flex-1 {
    flex: 1;
}

// flex 主轴居中对齐方式
$flex-jc: (start: flex-start, center: center, end: flex-end, between: space-between, around: space-around, );
@each $key,
$val in $flex-jc {
    .jc-#{$key} {
        justify-content: $val;
    }
}

// flex 交叉轴的对齐方式
$flex-ai: (start: flex-start, center: center, end: flex-end, stretch: stretch, );
@each $key,
$val in $flex-ai {
    .ai-#{$key} {
        align-items: $val;
    }
}

//定义内外边距
$spacing-type: (m: margin, p: padding, );
$spacing-direction: (t: top, r: right, b: bottom, l: left, );
$spacing-base-size: 1rem;
$spacing-size-level: (0: 0, 1: 0.25, 2: 0.5, 3: 1, 4: 2.5, 5: 3, );
//开始循环生成类名
@each $typeKey,
$typeVal in $spacing-type {
    // 类似 m-1 p-0 因此不需要循环方位
    @each $levelKey,
    $levelVal in $spacing-size-level {
        .#{$typeKey}-#{$levelKey} {
            #{$typeVal}: $levelVal * $spacing-base-size;
        }
    }
    // 类似 mx-1  , my-0  只包含 上下 或左右边距
    @each $levelKey,
    $levelVal in $spacing-size-level {
        // 水平方向
        .#{$typeKey}x-#{$levelKey} {
            #{$typeVal}-left: $levelVal * $spacing-base-size;
            #{$typeVal}-right: $levelVal * $spacing-base-size;
        }
        // 垂直方向
        .#{$typeKey}y-#{$levelKey} {
            #{$typeVal}-top: $levelVal * $spacing-base-size;
            #{$typeVal}-bottom: $levelVal * $spacing-base-size;
        }
    }
    // 类似 mt-1 pt-2
    @each $dcKey,
    $dcVal in $spacing-direction {
        @each $levelKey,
        $levelVal in $spacing-size-level {
            .#{$typeKey}#{$dcKey}-#{$levelKey} {
                #{$typeVal}-#{$dcVal}: $levelVal * $spacing-base-size;
            }
        }
    }
}

// 按钮
.btn {
    border: none;
    border-radius: .125rem;
    font-size: map-get($map: $font-sizes, $key: "sm") *$base-font-size;
    padding: 0.3rem 0.5rem;
}

// nav 导航
.nav {
    display: flex;
    // justify-content: space-between;
    .nav-item {
        border-bottom: 3px solid transparent;
        &.nav-active {
            color: map-get($map: $colors, $key: 'primary');
            border-bottom: 3px solid map-get($map: $colors, $key: 'primary');
        }
    }
    // 反色
    &.nav-inverse {
        .nav-item {
            border-bottom: 3px solid transparent;
            &.nav-active {
                color: map-get($map: $colors, $key: 'white');
                border-bottom: 3px solid #fff;
            }
        }
    }
}

// 精灵图
.sprite {
    background: url(./assets/images/sprite.png) no-repeat 0 0;
    background-size: 23.4375rem 28.4375rem;
    &.news {
        display: inline-block;
        background-position: 63.546% 15.517%;
        width: 1.4375rem;
        height: 1.25rem;
        // border: 1px solid red;
    }
    &.story {
        display: inline-block;
        background-position: 90.483% 15.614%;
        width: 23px;
        height: 20px;
    }
    &.shopping {
        display: inline-block;
        background-position: 36.746% 0.924%;
        width: 19px;
        height: 22px;
    }
    &.experience {
        display: inline-block;
        background-position: 10.408% 15.517%;
        width: 20px;
        height: 20px;
    }
    &.new-people {
        display: inline-block;
        background-position: 89.733% 1.266%;
        width: 20px;
        height: 21px;
    }
    &.glory {
        display: inline-block;
        background-position: 36.467% 15.287%;
        width: 24px;
        height: 20px;
    }
    &.simulation {
        display: inline-block;
        background-position: 9.302% 0.813%;
        width: 31px;
        height: 25px;
    }
    &.king {
        display: inline-block;
        background-position: 63.3% 0.927%;
        width: 24px;
        height: 24px;
    }
    &.bjnewban {
        display: inline-block;
        background-position: 0 96.207%;
        width: 24px;
        height: 20px;
    }
    &.versions {
        display: inline-block;
        background-position: 10.408% 15.517%;
        width: 20px;
        height: 20px;
    }
    &.game {
        display: inline-block;
        background-position: 90.057% 41.387%;
        width: 23px;
        height: 23px;
    }
    &.king-group {
        display: inline-block;
        background-position: 63.546% 27.535%;
        width: 23px;
        height: 21px;
    }
    &.creative {
        display: inline-block;
        background-position: 90.057% 41.387%;
        width: 23px;
        height: 23px;
    }
    &.arrow-show-hide {
        display: inline-block;
        background-position: 38.577% 52.076%;
        width: 10px;
        height: 10px;
        transform: scale(1.5);
    }
}

// card
.card-header {
    border-bottom: 1px solid $borderColor;
}

@each $dir in (left, top, right, bottom) {
    .border-#{$dir} {
        border-#{$dir}: 1px solid $borderColor;
    }
}